<script lang="ts" setup name="BreakageSheet">
import { CirclePlus, Delete, EditPen } from '@element-plus/icons-vue'
import { ProTableInstance } from '~/library/components/ProTable/interface'
import { Procure } from '~/src/api/interface/procure'
import { deleteStockOutAPI, exportStockOutAPI, getStockOutListAPI, unCheckStockOutAPI } from '~/src/api/procure'
import { breakageSheetColumn } from './info/columns'

const initParam = reactive({ orderType: 2 })

const proTableRef = ref<ProTableInstance>()
const router = useRouter()
const route = useRoute()

const toCreate = (id: string, status?: boolean) => {
  if (id) {
    router.push({
      path: '/procure/breakageSheetEdit',
      query: {
        id: id,
        type: status ? 'audited' : 'edit',
      },
    })
  } else {
    router.push(`/procure/breakageSheetEdit?type=add`)
  }
}

const unCheckRow = async (params: Procure.BreakageSheet) => {
  await useHandleData(unCheckStockOutAPI, { id: params.id, orderType: 2 }, `反审核编号【${params.orderNo}】报损单`)
  proTableRef.value?.getTableList()
}
const onDelete = async (params: Procure.BreakageSheet) => {
  await useHandleData(deleteStockOutAPI, { id: params.id, orderType: 2 }, `删除编号【${params.orderNo}】报损单`)
  proTableRef.value?.getTableList()
}
const toExport = async (params: Procure.BreakageSheet) => {
  await useHandleData(exportStockOutAPI, { id: params.id, orderType: 2 }, `导出编号【${params.orderNo}】报损单`)
  proTableRef.value?.getTableList()
}
</script>

<template>
  <div class="auto-height-container">
    <pro-table
      ref="proTableRef"
      :columns="breakageSheetColumn"
      highlight-current-row
      :indent="20"
      :init-param="initParam"
      :isCard="false"
      :pagination="true"
      :request-api="getStockOutListAPI"
      row-key="id"
      title="报损单列表"
    >
      <template #tableHeader>
        <el-button v-auth="'add'" :icon="CirclePlus" type="primary" @click="toCreate('')">新增报损单</el-button>
      </template>
      <template #orderNo="{ row }">
        <el-button v-auth="'edit'" :icon="EditPen" link type="primary" @click="toCreate(row.id, row.checkFlag)">
          {{ row.orderNo }}
        </el-button>
      </template>
      <template #operation="scope">
        <!-- <el-button
          v-auth="'check'"
          v-if="!scope.row.checkFlag"
          type="primary"
          link
          :icon="FolderChecked"
          @click="onCheckRow(scope.row)"
        >
          审核
        </el-button> -->
        <!--  v-auth="'check'" -->
        <el-button v-if="scope.row.checkFlag" v-auth="'uncheck'" link type="primary" @click="unCheckRow(scope.row)">反审核</el-button>
        <!-- <el-button v-if="scope.row.checkFlag" v-auth="'view'" :icon="View" link type="primary" @click="toCreate(scope.row.id)">
          查看
        </el-button> -->
        <el-button v-if="!scope.row.checkFlag" v-auth="'delete'" :icon="Delete" link type="primary" @click="onDelete(scope.row)">
          删除
        </el-button>
        <!-- <el-button type="primary" link :icon="EditPen" @click="toExport(scope.row)"> 导出 </el-button> -->
      </template>
    </pro-table>
  </div>
</template>

<style lang="scss" scoped></style>
